import React, { useEffect, useRef, useState } from 'react';
import {
  Form,
  Input,
  Modal,
  Select,
  Row,
  Col,
  DatePicker,
  InputNumber,
} from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiProductGetList,
  apiPurchaseGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);
  const { loading: getListLoading, run } = useRequest(apiPurchaseGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useUpdateEffect(() => {
    run({
      productName: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);

  useUpdateEffect(() => {
    if (visible === true) {
      run({
        pageNo: 1,
        pageSize: 10,
      });
    }
  }, [visible]);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.price && allValues.weight) {
      form.setFieldsValue({
        totalAmount: changedValues.price * allValues.weight,
      });
    }

    if (changedValues.weight && allValues.price) {
      form.setFieldsValue({
        totalAmount: changedValues.weight * allValues.price,
      });
    }
  };

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        initialValues={{ parentId: 0 }}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <FormItem
          rules={[{ required: true, message: '请选择公司' }]}
          {...formItemLayout}
          label={'分公司'}
          name="company"
        >
          <Select>
            {adminCompanyType.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </FormItem>

        <FormItem
          rules={[{ required: true, message: '请选择日期' }]}
          label={'日期'}
          name="entryDate"
          {...formItemLayout}
        >
          <DatePicker style={{ width: '100%' }} />
        </FormItem>

        <FormItem
          name="customer"
          label={'客户'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入客户' }]}
        >
          <Input />
        </FormItem>

        <FormItem
          name="category"
          label={'品类'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入品类' }]}
        >
          <Input />
        </FormItem>

        <FormItem
          name="productName"
          label={'品名'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入品名' }]}
        >
          <Input />
        </FormItem>

        <FormItem
          name="weight"
          label={'重量'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入重量' }]}
        >
          <Input />
        </FormItem>

        <FormItem name="price" label={'单价'} {...formItemLayout}>
          <Input />
        </FormItem>

        <FormItem
          name="totalAmount"
          label={'总金额'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入总金额' }]}
        >
          <Input />
        </FormItem>

        <FormItem
          name="licensePlate"
          label={'车牌号'}
          {...formItemLayout}
          rules={[{ required: true, message: '请输入车牌号' }]}
        >
          <Input />
        </FormItem>

        <FormItem {...formItemLayout} label={'备注'} name="remark">
          <Input.TextArea />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
